<template>
  <view>
    <form @submit="formSubmit">
      <view class="b-option">
        <view
          class="b-option__item"
          @tap="choose_photo"
        >
          <view class="b-option__item-left">
            店铺Logo
          </view>
          <view class="b-option__item-right">
            <image :src="captchaSrc"></image>
            <text
              style="color:#aaa"
              v-if="!logoImgPath && !shopInfo.shopLogo"
            >请上传logo图片</text>
            <uniIcons
              type="arrowright"
              size="22"
              color="#aaa"
            ></uniIcons>
          </view>
        </view>
        <view class="b-option__item">
          <view class="b-option__item-left">
            店铺名称
          </view>
          <view class="b-option__item-right">
            <input
              type="text"
              placeholder="请输入店铺名称"
              placeholder-style="color:#bbb;font-size:14px"
              v-model="shopName"
              name="shopName"
            >
          </view>
        </view>

        <view class="b-option__item">
          <view class="b-option__item-left">
            主营类目
          </view>
          <view class="b-option__item-right">
            <input
              type="text"
              placeholder="请输入主营类目"
              placeholder-style="color:#bbb;font-size:14px"
              v-model="mainCategory"
              name="mainCategory"
            >
          </view>
        </view>

        <view class="b-option__item">
          <view class="b-option__item-left">
            联系电话
          </view>
          <view class="b-option__item-right">
            <input
              type="number"
              placeholder="请输入联系电话"
              placeholder-style="color:#bbb;font-size:14px"
              v-model="mobile"
              name="mobile"
            >
          </view>
        </view>
        <view class="b-option__item">
          <view class="b-option__item-left">
            联系地址
          </view>
          <view class="b-option__item-right">
            <input
              type="text"
              placeholder="请输入联系地址"
              placeholder-style="color:#bbb;font-size:14px"
              v-model="address"
              name="address"
            >
          </view>
        </view>

        <!-- <view
        class="b-option__item"

      >
        <view class="b-option__item-left">
          店铺背景图
        </view>
        <view class="b-option__item-right">
          <text style="color:#999">请设置</text>
          <uniIcons
            type="arrowright"
            size="22"
            color="#aaa"
          ></uniIcons>
        </view>
      </view> -->
      </view>
      <view class="b-explain">
        <view class="b-explain__title">店铺介绍</view>
        <textarea
          placeholder="请输入店铺的详细介绍"
          placeholder-style="color:#bbb"
          v-model="notice"
          name="notice"
        ></textarea>
      </view>
      <!-- <view
      class="b-yyzz"
      @tap="choose_photo"
    >
      <text class="b-yyzz__left">
        上传营业执照
      </text>
      <view class="b-yyzz__right">
        <image></image>
        <uniIcons
          type="arrowright"
          size="22"
          color="#aaa"
        ></uniIcons>
      </view>
    </view> -->

      <button
        class="b-btn"
        formType="submit"
      >
        确认
      </button>

    </form>
  </view>

</template>

<script>
import uniIcons from "@/components/uni-icons/uni-icons"
import graceDialog from '../../graceUI/components/graceDialog.vue';
let graceChecker = require("@/graceUI/jsTools/graceChecker.js");
export default {
  components: { uniIcons, graceDialog },
  onLoad() {
    this.shopInfo = uni.getStorageSync('shopInfo')
    console.log(this.shopInfo)
    this.logoImgPath = this.shopInfo.shopLogo
    this.shopName = this.shopInfo.shopName
    this.mainCategory = this.shopInfo.mainCategory
    this.mobile = this.shopInfo.mobile
    this.notice = this.shopInfo.notice
    this.address = this.shopInfo.address
  },
  data() {
    return {
      shopInfo: {},
      mainCategory: '',
      address: '',
      logoImgPath: '',
      shopName: '',
      mobile: '',
      notice: '',
    }
  },
  computed: {
    captchaSrc() {
      return this.logoImgPath && 'data:image/jpeg;base64,' + this.logoImgPath.replace(/[\r\n]/g, "");
    }
  },
  methods: {
    choose_photo() {
      uni.chooseImage({
        count: 9, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: res => {
          console.log(res)
          let imgSize = res.tempFiles[0].size
          let temp = res.tempFilePaths[0];
          // if(imgSize >=50240){
          //  return  uni.navigateTo({
          //     url:`/pages/StoreManage/cropper?logoImg=${temp}`
          //   })
          // }
          // console.log(temp)
          uni.showLoading({
            title: '加载中'
          });
          uni.uploadFile({
            url: `${this.$base}/seller/file/uploadLogoAva`, //仅为示例，非真实的接口地址
            filePath: temp,
            name: 'file',
            fileType: 'image',
            formData: {
              ruleGroupId: '3462e1f4cf1s0408f3f352f3fdb64f20',
              busType: 1201
            },
            header: {
              Authorization: uni.getStorageSync('sessionId')
            },
            success: (uploadFileRes) => {
              let res = JSON.parse(uploadFileRes.data)
              console.log(res)
              if (res.code == 200) {
                this.logoImgPath = res.data
               uni.showToast({ title:'上传成功'})
              } else {
                return uni.showToast({ title: res.msg, icon: 'none' })
              }
              uni.hideLoading()
            }
          })

        },

      });
    },

    async formSubmit(e) {
      // console.log(e)
      var rule = [
        { name: "shopName", checkType: "string", checkRule: "1,10", errorMsg: "店铺名称不能为空" },
        { name: "address", checkType: "notnull", errorMsg: "联系地址不能为空" },
        { name: "mainCategory", checkType: "notnull", errorMsg: "主营类目不能为空" },
        { name: "mobile", checkType: "notnull", checkRule: "请选择", errorMsg: "联系电话不能为空" },
        { name: "notice", checkType: "notnull", checkRule: "", errorMsg: "请输入店铺介绍" },
      ];
      let formData = e.detail.value;
      var checkRes = graceChecker.check(formData, rule);

      if (checkRes) {
        const shopInfo = uni.getStorageSync('shopInfo')
        console.log(shopInfo)
        this.$ld()
        let res = await this.$http.PUT({
          url: '/seller/shop',
          data: {
            notice: this.notice,
            mobile: this.mobile,
            shopName: this.shopName,
            address: this.address,
            mainCategory: this.mainCategory,
            shopId:shopInfo.shopId
          }
        })
        uni.hideLoading()
        if (res.code == 200) {
          // uni.showToast({ title: '发布店铺信息成功'})
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/Home/index'
            });
          }, 1000);
        } else {
          uni.showToast({ title: res.msg, icon: "none" });
        }
      } else {
        uni.showToast({ title: graceChecker.error, icon: "none" });
      }
    }
  }
}
</script>


<style lang="scss" scoped>
@import '@/scss';
@include b(option) {
  background: #fff;
  @include e(item) {
    @include flex-bw;
    height: 100upx;
    padding: 0 34upx;
    border-bottom: 1px solid #eee;
    &:nth-last-child(1) {
      border: none;
    }
  }
  @include e(item-left) {
  }
  @include e(item-right) {
    display: flex;
    align-items: center;
    image {
      @include size(70upx, 70upx);
      border-radius: 4upx;
      margin-right: 10upx;
    }
    input {
      text-align: right;
    }
  }
}
@include b(explain) {
  background: #fff;
  padding-bottom: 40upx;
  @include e(title) {
    height: 110upx;
    line-height: 110upx;
    border-bottom: 1px solid #eee;
    margin: 20upx 30upx 0 30upx;
  }
  .placeholder {
    padding-top: 20upx;
  }
  textarea {
    @include size(670upx, 300upx);
    margin: 0 auto;
    padding: 30upx 0 0 14upx;
  }
}
@include b(yyzz) {
  background: #fff;
  margin-top: 20upx;
  padding: 0 30upx;
  height: 138upx;
  @include flex-bw;
  @include e(right) {
    @include flex-center;
    image {
      @include size(100upx, 100upx);
      background: yellow;
      border-radius: 4upx;
      margin-right: 10upx;
    }
  }
}
@include b(btn) {
  @include size(670upx, 88upx);
  background: #0099ff;
  color: #fff;
  font-size: 32upx;
  margin: 40upx auto 0 auto;
  text-align: center;
  line-height: 80upx;
  border-radius: 12upx;
}

.popup-item {
  height: 100upx;
  line-height: 100upx;
  background: #fff;
  &:nth-last-of-type(1) {
    margin-top: 10upx;
  }
  &:nth-child(1) {
    border-bottom: 1px solid #eee;
  }
}
</style>